<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07_父子组件之间通信</title>
</head>
<!-- 
 引出: 一般都是在最大的组件里发出网络请求拿到数据来进行页面数据渲染,但是这数据里面会有一部分数据是交给其它组件展示的,
 那么就涉及到组件之间的数据传递了(即:组件通信).

 如何通信: 使用 props 属性
-->

<body>
    <div id="app">
        <tmp v-bind:a="message"></tmp>
        <tmp1 :b="b"></tmp1> 
    </div>
</body>
<script src="../vue.js"></script>

<!-- 定义子组件,只要不是 Vue 实例里定义的组件都统称为【子组件】 -->
<template id="tmp">
    <div>
        <h3>这是来自父组件传递的消息: {{a}}</h3>
    </div>
</template>

<template id="tmp1">
    <div>
        <h3>{{b}}</h3>
    </div>
</template>

<script>
    let tmp = {
        template: '#tmp',
        //props: 'a'  报错: props 必须是一个数组或对象,不能是字符串
        props: ['a']  //用props里定义的属性去接受父组件传递的值
    }

    let tmp1 = {
        template:'#tmp1',
        props:{
            b:{
                type: String,   //规定数据类型必须是字符串
                default: 'bbb'   //默认值    
            }
        }
    }

    const vm = new Vue({
        el: '#app',
        data: {
            message: '你好啊,儿子!',
            b: 'hello props'  
        },
        components: {
            tmp,
            tmp1
        }
    })
</script>

</html>